<template>
	<view class="route-userInfo">
		<view class="inner">
			<!-- #ifdef MP-WEIXIN -->
			<view class="cont">
				<view class="tx">

					<view class="val">
						<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image :src="avatarUrl" class="avatar-img" v-if="avatarUrl"></image>
							<view class="text" v-else>
								<u-icon name="plus" color="#999" size="20"></u-icon>
								<view class="">
									选择头像
								</view>

							</view>
						</button>
					</view>

				</view>


				<view class="item border-b">
					<view class="label">
						昵称：
					</view>
					<view class="val">
						<input class="nickname" type="nickname" :value="nickname" @blur="bindblur"
							placeholder="请输入昵称" />
					</view>

				</view>
				<view class="item">
					<view class="label">
						手机号：
					</view>
					<view class="val" v-if="phone">
						{{phone}}
					</view>
					<view class="btn" v-else>
						<button class="phonebtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
							plain="true">授权获取</button>
					</view>

				</view>
			</view>

			<!-- #endif -->
		</view>
		<view class="footer">
			<view class="btn" @click="handleSubmit">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import handleCache from "@/utils/cache.js"
	import {
		ref
	} from 'vue'
	import {
		userApi,
		storeApi
	} from '@/api/index.js'
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	let nickname = ref('')
	let avatarUrl = ref('')
	let phone = ref('')
	let uid = ref('')
	let logo = ref('')
	let shanghuid = ref('')
	onLoad((options) => {
		console.log(options)
		if (options.uid) {
			uid.value = Number(options.uid)
		}

		if (options.shanghuid) {
			shanghuid.value = Number(shanghuid)
		}
	})
	//更改头像
	const onChooseAvatar = async e => {
		const tempFilePath = e.detail.avatarUrl //上传的图片地址
		const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB
		uni.getFileInfo({
			filePath: tempFilePath,
			success: res => {
				const fileSize = res.size
				if (fileSize > maxSizeInBytes) {
					//如果上传的图片大小超过1MB，进行提示
					// uni.$showMsg('请上传小于1MB的图片')
					uni.showToast({
						title: '请上传小于1MB的图片',
						mask: true
					})
					return
				}
				//图片大小符合，替换图片
				avatarUrl.value = tempFilePath
				//将更改的图片上传到服务器
				uni.uploadFile({
					url: 'https://dscc.suishilian.com/admin/uploadFile',
					filePath: avatarUrl.value,
					name: 'file',
					header: {

					},
					success(res) {
						console.log(res)
						let data = JSON.parse(res.data)
						logo.value = data.data
					}
				})
			}
		})
	}

	const bindblur = async e => {
		nickname.value = e.detail.value
	}
	const getPhoneNumber = (res) => {
		console.log(res)
		userApi.phoneJm({
			iv: res.detail.iv,
			encryptedData: res.detail.encryptedData,
			uid: uid.value
		}, {
			loading: {
				text: '获取中'
			}
		}).then((info) => {
			phone.value = info.data
		})
	}

	const handleSubmit = async () => {
		if (!logo.value) {
			uni.showToast({
				icon: 'none',
				title: '请上传头像'
			})
			return
		}
		if (!nickname.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入昵称'
			})
			return
		}
		if (!phone.value) {
			uni.showToast({
				icon: 'none',
				title: '请授权手机号'
			})
			return
		}
		uni.showLoading({
			mask: true,
			title: '提交中'
		})
		let {
			code,
			data
		} = await userApi.userUpdate({
			uid: uid.value,
			nickname: nickname.value,
			logo: logo.value
		})

		if (code == 0) {
			data.shanghuid = shanghuid.value
			storeApi.storeinfo({
				id: shanghuid.value
			}).then((res) => {
				uni.hideLoading()
				if (res.code === 0) {
					data.shanghuname = res.data.name
				}
				handleCache.set('userInfo', data, 'forever')
				uni.switchTab({
					url: '/pages/user/user'
				})
			})

		}


	}
</script>

<style lang="scss" scoped>
	.route-userInfo {
		padding: 40rpx 24rpx 170rpx 24rpx;

		.inner {
			.cont {
				background-color: #fff;
				padding: 24rpx 30rpx;
				border-radius: 10rpx;
			}

			.tx {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: 30rpx;
				margin-bottom: 40rpx;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					border: 1rpx solid #edf0f2;
					padding: 0;
					background-color: #fff;
					box-shadow: none;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;


					.text {
						padding-top: 10rpx;
						font-size: 24rpx;
						color: #999;
						display: flex;
						flex-direction: column;
						// justify-content: center;
						align-items: center;
					}


					.avatar-img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.item {

				display: flex;
				align-items: center;
				// padding: 15rpx 0;
				height: 80rpx;

				.label {
					flex-shrink: 0;
					width: 130rpx;
					text-align: right;
				}

				.val {
					flex: 1;
				}

				.btn {
					flex-shrink: 0;
					height: 100%;
					padding: 0 10rpx;


					.phonebtn {
						border: none;
						padding: 0;
						color: #ED2920;
						font-size: 24rpx;
						line-height: 30rpx;
						height: 100%;
						display: flex;
						align-items: center;
					}
				}

			}

			.border-b {
				border-bottom: 1px solid #edf0f2;
			}
		}

		.footer {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding-left: 24rpx;
			padding-right: 24rpx;
			padding-top: 11rpx;
			height: 130rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ED2920;
				color: #fff;
				padding: 19rpx 0;
				border-radius: 40rpx;
			}
		}
	}
</style>